<template>
	<view class="classify">
		<custom-head-top>
			<template #left>
				分类管理
			</template>
			<template #right>
				<button type="primary" plain size="mini" @click="handleAdd">
					<uni-icons type="plusempty" size="16" color="#4586ff"></uni-icons>
					新增分类
				</button>
				<button type="warn" plain size="mini">
					<uni-icons type="trash" size="16" color="#e43d33"></uni-icons>
					删除</button>
			</template>
		</custom-head-top>
		<view class="main">
			<uni-table border stripe emptyText="暂无更多数据">
				<!-- 表头行 -->
				<uni-tr>
					<uni-th align="left" width="150">缩略图</uni-th>
					<uni-th align="left">分类名称</uni-th>
					<uni-th align="left">排序</uni-th>
					<uni-th align="left">是否推荐</uni-th>
					<uni-th align="left">是否启用</uni-th>
					<uni-th align="center" width="200">操作</uni-th>
				</uni-tr>
				<!-- 表格数据行 -->
				<uni-tr>
					<uni-td>
						<image class="thumb" src="/static/logo.png" mode=""></image>
					</uni-td>
					<uni-td>
						明星美女
					</uni-td>
					<uni-td>
						1
					</uni-td>
					<uni-td>
						<uni-tag inverted text="推荐" type="error" />
					</uni-td>
					<uni-td>
						<switch style="transform: scale(0.6); transform-origin: left center;" />
					</uni-td>
					<!-- 操作按钮 多个地方会用到 设置为公共类 -->
					<uni-td>
						<view class="operate-btn-group">
							<button size="mini" type="primary" plain>修改</button>
							<button size="mini" type="warn" plain>删除</button>
						</view>

					</uni-td>
				</uni-tr>

			</uni-table>
			<!-- 设置分页 这也是一个公共样式 写进公共类里面 -->
			<view class="paging">
				<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>

			</view>
			<!-- 设置弹窗 -->
			<uni-popup  ref="classifyPopup" type="center" background-color="#fff" :is-mask-click="false">
				<uni-forms :modelValue="formData">
					<uni-forms-item label="名称" name="name">
					<uni-easyinput type="text" v-model="formData.classifyName" placeholder="请输入分类名称" />
					</uni-forms-item>
					<uni-forms-item label="排序" name="order">
					<uni-easyinput type="number" v-model="formData.order" placeholder="请输入姓名" />
					</uni-forms-item>
	
				</uni-forms>

			</uni-popup>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const classifyPopup = ref(null)
	const handleAdd = () => {
		classifyPopup.value.open()
	}
	const formData = ref({})
</script>

<style lang="scss" scoped>
	.main {
		padding: 0 1px;

		.thumb {
			width: 45px;
			height: 90px;

			image {
				width: 100%;
				height: 100%;
			}
		}
		
	}
</style>